status badge - #902

Commit Type

• feat: A new feature
• fix: A bug fix
• docs: Documentation only changes
• style: Changes that do not affect the meaning of the code (formatting, etc.)
• refactor: A code change that neither fixes a bug nor adds a feature
• perf: A code change that improves performance
• test: Adding missing or correcting existing tests
• build: Changes affecting the build system or external dependencies
• ci: Changes to CI/CD configuration files and scripts
• chore: Other changes that don't modify src or test files
• revert: Reverts a previous commit

Breaking change? (If yes, add BREAKING CHANGE in the commit footer)

• Yes — this contains a breaking change
• No

What changed

Added accessible, color-coded stream status badges with non-color icons and actionable tooltips across the Streams Table:

• Created StatusBadge Component (frontend/src/components/StatusBadge.tsx):
  • Distinct color-coded badge themes for all 5 statuses:
    • scheduled: Gray (badge-scheduled)
    • active: Blue (badge-active)
    • completed: Green (badge-completed)
    • canceled: Red (badge-canceled)
    • paused: Yellow (badge-paused)
  • Accessible, non-color visual distinction via semantic inline SVG icons (aria-hidden="true") for each status (Clock, Play, Pause, Check, X).
  • Actionable tooltips (title and aria-label) explaining the current stream state and actionable next steps (e.g. edit start time, pause, resume, cancel).
  • Keyboard accessible with tabIndex={0} and focus outline styling.
• Updated StreamsTable Component (frontend/src/components/StreamsTable.tsx):
  • Integrated StatusBadge into the stream status cell.
• Updated Styles (frontend/src/index.css):
  • Added layout, flex alignment, and custom color palettes for .badge-scheduled, .badge-active, .badge-completed, .badge-canceled, .badge-paused, and .status-badge-icon.
• Added Comprehensive Tests:
  • Added unit tests in frontend/src/components/StatusBadge.test.tsx verifying badge styling, icons, tooltips, and accessibility attributes.
  • Added integration tests in frontend/src/components/StreamsTable.test.tsx verifying status badge rendering across stream rows.

Testing done

• Automated Vitest Tests:
  • Ran npx vitest run src/components/StatusBadge.test.tsx src/components/StreamsTable.test.tsx:
    • StatusBadge.test.tsx: 7 / 7 passed
    • StreamsTable.test.tsx: 15 / 15 passed
    • Total: 22 / 22 tests passing
• Linting:
  • Ran npx eslint src/components/StatusBadge.tsx src/components/StatusBadge.test.tsx src/components/StreamsTable.tsx src/components/StreamsTable.test.tsx: 0 errors.

Related issues

Closes #757

Checklist

• I used the correct commit type (see above) for the squashed commit message.
• I kept the change focused on the related issue.
• I added or updated tests where useful.
• I updated documentation where behavior changed.
• I verified the app still builds or explained why verification was skipped.
• My commits follow Conventional Commits (enforced by commitlint).